/**
 * Axios传参示例
 * 日期：2018/4/18
**/
/* 用GET方式发送不同的参数获得不同数据 */
const btnLoadData1 = document.querySelector("#loadData-1");
btnLoadData1.onclick = function() {
    const petSelectVal = document.querySelector('#petSelect').value;
    const petInfo = document.querySelector('#petInfo');
    // 允许的参数有："pikachu"、"penhuolong"、"miaowahua"
    axios.get('https://www.aulence.com/php/role-info.php?role=' + petSelectVal)
    .then((resp) => {
        // console.log(resp);
        const data = resp.data;
        // 设定名称、系列和技能
        petInfo.children[0].children[1].innerHTML = data.name;
        petInfo.children[1].children[1].innerHTML = data.series;
        petInfo.children[2].children[1].innerHTML = data.skill.join("、");
    });
    // 或者是写成这种形式
    // axios.get('http://aulence.com/php/role-info.php', {
    //     params: {
    //         role: 'penhuolong'
    //     }
    // })
    // .then((resp) => {
    //     console.log(resp.data)
    // });
}

/* 使用POST方式向后台发送数据 */
const btnLoadData2 = document.querySelector("#loadData-2");
btnLoadData2.onclick = function() {
    const userSignUpInfo = {
        name: userInfoForm.name.value,
        tel: userInfoForm.tel.value,
        pwd: userInfoForm.pwd.value
    }
    // 创建一个URL查询字符串对象
    const params = new URLSearchParams();
    // 这样写效率低，可维护性不强
    // params.append('name','aulence');
    // params.append('tel','18116657687');
    // params.append('pwd','123456');
    // 可以改写成这种形式
    for(let x in userSignUpInfo) {
        params.append(x, userSignUpInfo[x]);
    }
    //　使用POST向后台发送带参数请求
    axios.post('https://www.aulence.com/php/user-signup.php', params).then((resp) => {
        alert('来自后台返回的结果：\n' + resp.data)
    });
}

/* 使用自定义配置的GET方式请求数据 */
const btnCalendar = document.getElementById('btnCalendar');
btnCalendar.onclick = function() {
    // 获取日期的选择
    const inputDate = new Date(dateForm.inputDate.value);
    // 格式化为参数所需的时间格式（不能给日期补零，否则会造成参数错误）
    const formatDate = `${inputDate.getFullYear()}-${inputDate.getMonth() + 1}-${inputDate.getDate()}` 

    // 进行GET请求方式的配置
    axios({
        // 请求方式
        method: 'GET',
        // 定义公共请求地址
        baseURL: 'http://api.aulence.com/message-board/',
        // 可以编写完整的URL，如果有baseURL配置，相当于是baseURL + url的关系
        url: 'perpetual-calendar.php',
        // 返回的数据（响应结果）为JSON对象
        responseType: 'json',
        // 这里就是向后台发送序列化后的查询参数实例
        params: {
            inputDate: formatDate
        },
        // 请求超时设置，由catch进行处理
        timeout: 5000
    }).then(res => {
        const theDay = res.data;
        console.log(theDay);
        // 处理可能会出现的 false 值（为 undefined 的情况）
        theDay.holiday = !theDay.holiday?'（无）':theDay.holiday;
        theDay.desc = !theDay.desc?'（无）':theDay.desc;
        theDay.suit = !theDay.suit?'（无）':theDay.suit;
        theDay.avoid = !theDay.avoid?'（无）':theDay.avoid;

        // 在指定区域显示出数据请求结果
        const dateRes = document.getElementById('dateRes');
        dateRes.innerHTML = `
            <div>
                <label>所选日期：</label>
                <span>${theDay.date}</span>
            </div>
            <div>
                <label>节日：</label>
                <span>${theDay.holiday}</span>
            </div>
            <div>
                <label>周：</label>
                <span>${theDay.weekday}</span>
            </div>
            <div>
                <label>国定假日：</label>
                <span>${theDay.desc}</span>
            </div>
            <div>
                <label>生肖：</label>
                <span>${theDay.animalsYear}</span>
            </div>
            <div>
                <label>农历年：</label>
                <span>${theDay.lunarYear}</span>
            </div>
            <div>
                <label>农历月：</label>
                <span>${theDay.lunar}</span>
            </div>
            <div>
                <label>宜：</label>
                <span>${theDay.suit}</span>
            </div>
            <div>
                <label>忌：</label>
                <span>${theDay.avoid}</span>
            </div>
        `;
    }).catch(err => {
        console.error(err);
    });
}

/* 使用自定义配置的POST方式请求数据 */
const btnPubMesg = document.getElementById('btnPubMesg');
btnPubMesg.onclick = function() {
    // 获取表单输入的值
    const nickname = mesgForm.nickname.value.trim();
    const pubContent = mesgForm.pubContent.value.trim();
    // 创建查询参数实例
    const params = new URLSearchParams();
    params.append('spokesperson',nickname);
    params.append('messageContent',pubContent);
    // 配置axios请求
    axios({
        // 请求方式
        method: 'POST',
        // 定义公共请求地址
        baseURL: 'http://api.aulence.com/message-board/',
        // 可以编写完整的URL，如果有baseURL配置，相当于是baseURL + url的关系
        url: 'mesg-add.php',
        // 返回的数据（响应结果）为文本型
        responseType: 'text',
        // 这里就是向后台发送序列化后的查询参数实例
        data: params,
        // 发送的自定义请求头
        headers: {
            // 这里使用默认值，表示在发送前编码所有字符
            // 这在“https://www.aulence.com”的HTML分类课程的“HTML表单元素”一章里有讲解
            'Content-Type': 'application/x-www-form-urlencoded'
        },
        // 请求超时设置，由catch进行处理
        timeout: 5000
    }).then(res => {
        console.log(res);
        // 清空表单填写
        mesgForm.nickname.value = '';
        mesgForm.pubContent.value = '';
        alert(res.data);
    }).catch(err => {
        console.error(err);
    });
    // 如果简写，相当于这样。但是简写不能配置详细的字段
    /* axios.post('http://api.aulence.com/message-board/mesg-add.php',params).then(res => {
        console.log(res.data);
    }).catch(err => {
        console.error(err);
    }); */
}